//content.js
var arrayimage = ["content/1.jpg","content/2.jpg","content/3.jpg","content/4.jpg","content/5.jpg","content/6.jpg","content/7.jpg"];
var arrayvideo = ["http://www.youtube.com/embed/PY4d0FwB0wE","http://www.youtube.com/embed/3fJ5ikWtwaY","http://www.youtube.com/embed/N7TzPEYci_w"];
var videoname = ["Top 10 Plays of the Night: March 5th","Minecraft - Testificate Golf - Holes 1-4","Cops Get Owned!!! - Epic Pee Prank"];
var like = new Array();
var isliked = new Array(); //boolean untuk like
var isdisliked = new Array(); //boolean untuk dislike

/* for(i=0;i<arrayimage.length;i++)
{
	isliked[i] = 0;
	isdisliked[i] = 0;
} */

function createImgForContent()
{
	initiateLike();
	var addto = document.getElementById("content"); 
	var newImage;var newlike;var newbuttonlike;var newbuttondislike;var newlink;
	var newdiv;var newimglink;var imglike;var line;var newspan;var newspan1;
	for(i=0;i<arrayimage.length;i++)
	{
		newdiv = document.createElement('div');
		newspan = document.createElement('span');
		newImage = document.createElement('img');
		newlike = document.createElement('span');
		newbuttonlike = document.createElement('button');
		newbuttondislike = document.createElement('button');
		newlink = document.createElement('a');
		newimglink = document.createElement('a');
		imglike = document.createElement('img');
		
		newdiv.setAttribute('class','portofolio');
		newspan.setAttribute('class','likecount');
		
		newimglink.setAttribute('href',parseImageName(arrayimage[i])+'.html');
		newimglink.setAttribute('class',"imgcontainer");
/* 		newimglink.setAttribute('width','500');
		newimglink.setAttribute('height','500'); */
		
		imglike.setAttribute('src','theme/like-mark.png');
		imglike.setAttribute('class','thumbup');
		
		newlink.innerHTML= parseImageName(arrayimage[i]);
		newlink.setAttribute('href',parseImageName(arrayimage[i])+'.html');
		newlink.setAttribute('class','title');

		newImage.setAttribute('src',arrayimage[i]);
		
		newlike.innerHTML= /* "TotalLike: "+ */like[i];
		newlike.setAttribute('id',"like"+i);
		
		newbuttonlike.innerHTML = "Like";
		newbuttonlike.setAttribute('id',"but_like"+i);
		newbuttonlike.setAttribute('onclick','redrawLikedElement(this)');
		newbuttonlike.setAttribute('class','but_like');
		
		newbuttondislike.innerHTML = "Dislike";
		newbuttondislike.setAttribute('id',"but_dislike"+i);
		newbuttondislike.setAttribute('onclick','redrawDislikedElement(this)');
		newbuttondislike.setAttribute('class','but_dislike');
		
		newImage.setAttribute('width','400');
		newImage.setAttribute('height','300');
		newImage.setAttribute('class','bestcontent');
		
		newimglink.appendChild(newImage);

		newspan.appendChild(imglike);
		newspan.appendChild(newlike);		
		
		newdiv.appendChild(newimglink);
		newdiv.appendChild(newlink);
		newdiv.appendChild(newspan);
		newdiv.appendChild(newbuttonlike);
		newdiv.appendChild(newbuttondislike);
		newdiv.appendChild(document.createElement('br'));
		
		addto.appendChild(newdiv);
		line=document.createElement('hr');
		line.setAttribute('class','line');
		addto.appendChild(line);
	}
	
	var newvideo;var newcontainer;
	for(i=arrayimage.length;i<arrayimage.length+3;i++)
	{
		newdiv = document.createElement('div');
		newspan = document.createElement('span');
		newspan1 = document.createElement('span');
		newvideo = document.createElement('iframe');

		newvideo.setAttribute('src',arrayvideo[i-arrayimage.length]);
		newvideo.setAttribute('width',400);
		newvideo.setAttribute('height',300);
		newvideo.setAttribute('frameborder',0);
		
		newdiv.setAttribute('class','portofolio');
		newspan.setAttribute('class','likecountv');
		newspan1.setAttribute('class','buttonv');
		
		newlink = document.createElement('a');
		
		newlink.innerHTML= videoname[i-arrayimage.length];
		newlink.setAttribute('href','troll.html');
		newlink.setAttribute('class','title');
		
		newlike = document.createElement('span');
		newbuttonlike = document.createElement('button');
		newbuttondislike = document.createElement('button');
		newimglink = document.createElement('a');
		imglike = document.createElement('img');
		newcontainer = document.createElement('div');
		
		newcontainer.setAttribute('class','imgcontainer');
		
		newlike.innerHTML= /* "TotalLike: "+ */like[i];
		newlike.setAttribute('id',"like"+i);
		newlike.setAttribute('class','totallike');
		
		imglike.setAttribute('src','theme/like-mark.png');
		imglike.setAttribute('class','thumbupv');
		
		newbuttonlike.innerHTML = "Like";
		newbuttonlike.setAttribute('id',"but_like"+i);
		newbuttonlike.setAttribute('onclick','redrawLikedElement(this)');
		newbuttonlike.setAttribute('class','but_likev');
		
		newbuttondislike.innerHTML = "Dislike";
		newbuttondislike.setAttribute('id',"but_dislike"+i);
		newbuttondislike.setAttribute('onclick','redrawDislikedElement(this)');
		newbuttondislike.setAttribute('class','but_dislikev');
		
		newcontainer.appendChild(newvideo);
		newspan.appendChild(imglike);
		newspan.appendChild(newlike);		
		newspan1.appendChild(newbuttonlike);
		newspan1.appendChild(newbuttondislike);
		
		newdiv.appendChild(newcontainer);
		newdiv.appendChild(newlink);
		newdiv.appendChild(newspan);
		newdiv.appendChild(newspan1);
		newdiv.appendChild(document.createElement('br'));
		
		addto.appendChild(newdiv);
		if(i!=arrayimage.length+2){
			line=document.createElement('hr');
			line.setAttribute('class','line');
			addto.appendChild(line);
		}
	}
}
//merandom angka dari 10000 sampai 50000
function randomize()
{
	var randVal = -50000+(Math.random()*100000);
	return Math.round(randVal);
}
//isi like dengan angka random
function initiateLike()
{
	for(i=0;i<arrayimage.length+arrayvideo.length;i++)
	{
		like[i] = randomize();
		isliked[i] = 0;
		isdisliked[i] = 0;
	}
}
function redrawLikedElement(button)
{
	var elementnumber =parseInt(button.getAttribute("id")[button.getAttribute("id").length - 1]) ;
	var rem = document.getElementById("content");
	var oldspan = document.getElementById("like"+ elementnumber);
	//var newlike = document.createElement('span');
	var newlike = document.getElementById('like'+elementnumber);
	//newlike.setAttribute('id',"like"+elementnumber);
	if(!isliked[elementnumber]) //jika belum di like
	{
		//rem.removeChild(oldspan);
		like[elementnumber]++;
		newlike.innerHTML=/*  "TotalLike: " */+like[elementnumber];
		//button.parentNode.insertBefore(newlike,button);
		isliked[elementnumber] = 1;
		isdisliked[elementnumber] = 0;
	}
}
function redrawDislikedElement(button)
{
	var elementnumber =parseInt(button.getAttribute("id")[button.getAttribute("id").length - 1]) ;
	var rem = document.getElementById("container");
	var oldspan = document.getElementById("like"+ elementnumber);
	//var newlike = document.createElement('span');
	//newlike.setAttribute('id',"like"+elementnumber);
	var newlike = document.getElementById('like'+elementnumber);
	if(!isdisliked[elementnumber]) //jika belum di dislike
	{
		//rem.removeChild(oldspan);
		like[elementnumber]--;
		newlike.innerHTML= /* "TotalLike: " */+like[elementnumber];
		//button.parentNode.insertBefore(newlike,button.previousSibling);
		isliked[elementnumber] = 0;
		isdisliked[elementnumber] = 1;
	}
}

function parseImageName(name)
{
	var i = name.length;
	while(name[i] != '/')
	{
		i--;
	}
	return name.substring(i+1);
}